<template>
  <div class="app-page-scroll">
    <t-card header="基础用法">
      <div class="cpm-separator">基于url：data="/system/org/query"</div>
      <lg-biz-tree v-model="value" data="/system/org/query" />

      <div class="cpm-separator">基于api：:data="api.query"</div>
      <lg-biz-tree v-model="value" :data="api.query" />
    </t-card>
    <t-card header="不同组件">
      <div class="cpm-separator">全局组件：component="t-tree"</div>
      <lg-biz-tree v-model="checkboxValue" data="/system/org/query" component="t-tree" />

      <div class="cpm-separator">引入组件：:component="Tree"</div>
      <lg-biz-tree v-model="value" data="/system/org/query" :component="Tree" />
    </t-card>
    <t-card header="组件插槽">
      <lg-biz-tree data="/system/org/query">
        <template #default="{ loading, options }">
          <t-cascader v-model="slotValue" v-loading="loading" :options="options" />
        </template>
      </lg-biz-tree>
      {{ slotValue }}
    </t-card>

    <t-card header="增加选项">
      <div class="cpm-separator">增加一个选项：prepend="Object"</div>
      <lg-biz-tree data="/system/org/query" :prepend="{ value: '0', label: '全部' }" />

      <div class="cpm-separator">增加多个选项：prepend="Array"</div>
      <lg-biz-tree
        data="/system/org/query"
        :prepend="[
          { value: '0', label: '选项1' },
          { value: '1', label: '选项2' },
        ]"
      />

      <div class="cpm-separator">通过函数增加选项：prepend="Function"</div>
      <lg-biz-tree
        data="/system/org/query"
        :prepend="
          () => [
            { value: '0', label: '选项1' },
            { value: '1', label: '选项2' },
          ]
        "
      />

      <div class="cpm-separator">后面增加选项：append="Array"</div>
      <lg-biz-tree
        data="/system/org/query"
        :append="[
          { value: '0', label: '选项1' },
          { value: '1', label: '选项2' },
        ]"
      />
    </t-card>

    <t-card header="自定义格式、自定义处理">
      <div class="cpm-separator">自定义label：labelField="name"</div>
      <lg-biz-tree v-model="handleValue" data="/system/org/query" label-field="name" />

      <div class="cpm-separator">自定义label：labelField="${name}(${id})"</div>
      <lg-biz-tree v-model="handleValue" data="/system/org/query" label-field="${name}(${id})" />

      <div class="cpm-separator">自定义处理：handler</div>
      <lg-biz-tree v-model="handleValue" data="/system/org/query" fields="id,name,alias" :handler="handler" />
    </t-card>
    <t-card header="排序、过滤、搜索、分页">
      <div class="cpm-separator">排序：order-bys="-createTime,id"</div>
      <lg-biz-tree v-model="handleValue" data="/system/org/query" order-bys="-createTime,id" />

      <div class="cpm-separator">本地搜索：:search="true"</div>
      <lg-biz-tree v-model="handleValue" data="/system/org/query" :search="true" />

      <div class="cpm-separator">远程搜索：search="name|alias"</div>
      <lg-biz-tree v-model="handleValue" data="/system/org/query" search="name|alias" page-size="5" />
    </t-card>
    <!---------------------------------   api说明文档      -------------------------------------------->
    <t-card header="属性">
      <t-base-table :columns="propColumns" :data="propsData" style="width: 100%" />
      <div>其他属性参考使用的组件</div>
    </t-card>
    <t-card header="事件">
      <t-base-table :columns="emitColumns" :data="emitData" style="width: 100%" />
      <div>事件参考使用的组件</div>
    </t-card>
    <t-card header="插槽">
      <t-base-table :columns="slotColumns" :data="slotData" style="width: 100%" />
    </t-card>
    <t-card header="api">
      <t-base-table :columns="apiColumns" :data="apiData" style="width: 100%" />
    </t-card>
  </div>
</template>
<script lang="ts" setup>
import './index.less';
import { ref } from 'vue';
import { Tree } from 'tdesign-vue-next';
import { LgBizTree } from '@/soar';
import api from '@/pages/auth/org/api';
import { apiColumns, emitColumns, propColumns, slotColumns } from './index';

const value = ref();
const checkboxValue = ref([]);
const slotValue = ref();
const handleValue = ref();
function handler(list) {
  list = list
    .filter((x) => x.id !== '1')
    .map((x) => {
      return {
        value: x.id,
        label: `${x.name}(${x.alias})`,
        disabled: x.name === '开发',
      };
    });
  return list;
}

const propsData = [
  { name: 'data', desc: '数据(源)', type: 'string | Function | Array', def: '' },
  { name: 'fields', desc: '查询的字段，默认第一个是value，第二个是label', type: 'string | string[]', def: 'id,name' },
  { name: 'orderBys', desc: '排序字段，参考soarQuery', type: 'string | string[]', def: '[]' },
  { name: 'filters', desc: '筛选条件，参考soarQuery', type: 'string | string[]', def: '[]' },
  { name: 'value', desc: '值格式，支持字段名和模板字符串，例：field 或 ${field1}-${field2}', type: 'string', def: '' },
  {
    name: 'label',
    desc: '显示格式，支持字段名和模板字符串，例：field 或 ${field1}（${field2}）',
    type: 'string',
    def: '',
  },
  {
    name: 'pid',
    desc: '父id格式，支持字段名和模板字符串，例：field 或 ${field1}（${field2}）',
    type: 'string',
    def: '',
  },
  { name: 'pageSize', desc: '分页大小', type: 'number', def: '1000' },
  { name: 'handler', desc: '结果处理', type: 'Function<object[]>', def: '' },
  {
    name: 'search',
    desc: '搜索，为true时使用本地搜索，为字符串时代表搜索的字段使用远程搜索',
    type: 'string | boolean',
    def: 'true',
  },
  { name: 'prepend', desc: '前面的选项', type: 'Function | Object[] | Object', def: '' },
  { name: 'append', desc: '后面的选项', type: 'Function | Object[] | Object', def: '' },
  { name: 'component', desc: '展示组件', type: 'string | Component', def: 't-tree-select' },
];

const emitData = [
  // { name: 'initialized', desc: '组件初始化事件', param: 'string' },
];

const apiData = [
  { name: 'reload', desc: '重新加载数据，支持传入参数', type: 'function', sample: 'reload({ "name-like": "测试" })' },
];

const slotData = [{ name: 'default', desc: '默认插槽，用于自定义渲染', scope: 'loading，options，reload, props' }];
</script>
